const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Tile = require("./Tile");
const Slick = require("Slick");
const FontIcon = require("FontIcon");

class Page extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }
    }

    render() {
        return (
            <div className="container">
                <Slick style={{width: 500}}>
                    <Slick.Item>1</Slick.Item>
                    <Slick.Item>2</Slick.Item>
                    <Slick.Item>3</Slick.Item>
                </Slick>


                <Slick style={{width: 500}} effect="slide" className="mt-20">
                    <Slick.Item>1</Slick.Item>
                    <Slick.Item>2</Slick.Item>
                    <Slick.Item>3</Slick.Item>
                </Slick>

                <Slick style={{width: 500}} layout="vertical" className="mt-20">
                    <Slick.Item>1</Slick.Item>
                    <Slick.Item>2</Slick.Item>
                    <Slick.Item>3</Slick.Item>
                </Slick>

                <Slick style={{width: 500}} effect="slide" layout="vertical" className="mt-20">
                    <Slick.Item>1</Slick.Item>
                    <Slick.Item>2</Slick.Item>
                    <Slick.Item>3</Slick.Item>
                </Slick>

                <Slick style={{width: 500}} effect="fade" className="mt-20">
                    <Slick.Item>1</Slick.Item>
                    <Slick.Item>2</Slick.Item>
                    <Slick.Item>3</Slick.Item>
                </Slick>

                <Slick style={{width: 500}} effect="slide" className="mt-20" autoPlay={true} delay={2000}>
                    <Slick.Item>1</Slick.Item>
                    <Slick.Item>2</Slick.Item>
                    <Slick.Item>3</Slick.Item>
                    <Slick.Item>4</Slick.Item>
                </Slick>
            </div>
        )
    }
}

module.exports = Page;